<template>
  <div class="index">
    <!-- 头部标题 -->
    <van-nav-bar fixed title="首页" />
    <!-- 频道区域 -->
    <van-tabs>
      <van-tab v-for="index in 8" :key="index" :title="'标签 ' + index">
        <!-- 文章区域结构 -->
        <!-- v-model: 组件是否刷新完成 true:刷新完成 false：刷新未完成 -->
        <!-- refresh: 下拉刷新时执行的事件 -->
        <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
          <!-- load：上拉触底时执行的函数 -->
          <!-- v-model: list 组件的加载状态 true：正在加载其它数据 false：数据加载完毕 -->
          <!-- finished：完结状态 true：说明所有的数据源加载完毕 false：还未加载完毕 -->
          <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
            <van-cell v-for="item in list" :key="item" :title="item" />
          </van-list>
        </van-pull-refresh>
      </van-tab>
    </van-tabs>
    <!-- 频道操作按钮 -->
    <div class="channelBtn">
      <van-icon name="wap-nav" />
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      // list 的加载状态
      loading: false,
      // list 的数据源是否加载完毕
      finished: false,
      // 设置 List 的数据源
      list: [],
      // 是否处理下拉状态
      isLoading: false
    }
  },
  methods: {
    // list 组件上拉触底时执行
    onLoad () {
      // 设置一个定时器，为了能够让大家看到加载的效果
      setTimeout(() => {
        // 准备 15 条数据
        var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20]
        // 向 list 中添加 15 条数据
        // 这里不应该将数据源进行赋值，而是应该拼接
        this.list = [...this.list, ...arr]
        // 将加载状态改为 false
        this.loading = false
        // 判断数据源的长度是否大于 60
        if (this.list.length >= 60) {
          // 说明数据源已经加载完毕
          this.finished = true
        }
        console.log('onload', this.list.length)
      }, 1000)
    },
    // 下拉刷新时触发的事件
    onRefresh () {
      setTimeout(() => {
        // 1.0 将 list 组伯中渲染的数据的长度重置为 0
        this.list = []
        // 2.0 将 list 的 finished 状态设置为 false
        this.finished = false
        // 将下拉状态设置为 false
        this.isLoading = false
        // 为了能够让 onRefresh 执行之后，再次得到数据源
        this.onLoad()
      }, 1000)
    }
  }
}
</script>

<style lang="less">
.van-nav-bar.van-hairline--bottom {
  background-color: #3e9df8;
  .van-nav-bar__title {
    color: #fff;
  }
}

.index {
  margin-top: 90px;
  margin-bottom: 50px;
  .van-tabs__wrap.van-tabs__wrap--scrollable.van-hairline--top-bottom {
    position: fixed;
    top: 46px;
    width: 90%;
    z-index: 999;
  }
  .channelBtn {
    position: fixed;
    top: 46px;
    right: 0px;
    height: 44px;
    width: 10%;
    text-align: center;
    line-height: 44px;
    background-color: #ccc;
    color: #fff;
  }
}
</style>
